<template>
  <v-layout class="rounded rounded-md">
    <!-- 顶部导航栏 -->
    <v-app-bar
      :elevation="2"
      rounded
      class="bg-transparent"  
    >
      <!-- 标题 -->
      <v-app-bar-title>
        <span class="font-weight-bold text-h5">onekkm</span>
      </v-app-bar-title>
      <!-- 中间导航链接 -->
      
      <v-btn
        prepend-icon="mdi-home"
        variant="text"
        height="40"
        href="/"
      >
        首页
      </v-btn>

      <v-menu
        :open-on-hover="true"
        open-delay="1"
      >
        <template #activator="{ props }">
          <v-btn
            prepend-icon="mdi-file-document-outline"
            height="40"
            v-bind="props"
          >
            文章
          </v-btn>
        </template>
        <v-list
          class="text-caption"
          style="background-color: rgba(0, 0, 0, 0.5);"
        >
          <v-list-item
            v-for="(item, index) in items"
            :key="index"
            :href="item.url"
          >
            <v-list-item-title
              class="text-caption"
            >
              {{ item.category }}
            </v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    
      <v-btn
        prepend-icon="mdi-road-variant"
        variant="text"
        height="40"
      >
        关于
      </v-btn>
      <!-- 右侧功能按钮 -->
      <v-spacer />
    </v-app-bar>

    <!-- 主体内容 -->
    <v-main>
      <slot />
    </v-main>
  </v-layout>
</template>
<script setup>
import { ref, onMounted } from 'vue';

// 动态加载中文文件名的 md 文件
const files = import.meta.glob('../../../vuepress-starter/docs/**', { eager: true, as: 'raw' });

console.log(files);

// 用于存储生成的 items
const items = ref([]);

onMounted(() => {
  // 使用一个 Set 来追踪已添加的标题，防止重复
  const seenTitles = new Set();

  // 遍历所有文件，将它们根据文件夹进行分类
  Object.keys(files).forEach((filePath) => {
    const decodedPath = decodeURIComponent(filePath); // 解码中文路径
    const segments = decodedPath.split('/');
    const category = segments[5];  // 获取文件夹名作为标题
    console.log(category);
    const url = `http://localhost:3000/articlesList/?category=${encodeURIComponent(category)}`;
    // 仅当该标题尚未出现时才添加到 items 数组中
    if (!seenTitles.has(category)) {
      items.value.push({category,url});
      seenTitles.add(category);  // 将标题添加到 Set 中，标记为已添加
    }
  });


});


</script>
